<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>{$microVote.title}</title>
		<meta charset="UTF-8">
		<meta name="viewport" content=" initial-scale=1.0,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta content="black" name="apple-mobile-web-app-status-bar-style" />
		<meta name="format-detection" content="telephone=no" />
		<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
		<script src="__PUBLIC__/Style/Common/js/GH.1.1.js"></script>
		<meta name="viewport" content="width=device-width,  initial-scale=1.0, user-scalable=0, minimum-scale=1.0,  maximum-scale=1.0" />

		<style>
			* {
				margin: 0px;
				padding: 0px;
				font-size: 12px;
				font-family: 'microsoft yahei', '宋体', 'tahoma', ​'arial', ​'simsun', ​'sans-serif';
				color: #fff;
			}
			img {
				border: none;
			}
			li {
				list-style: none;
			}
			.cle {
				clear: both;
			}
			body {
				background: #ccc;
			}
			a {
				color: #fff;
				text-decoration: none;
				border: none;
			}
			a:hover {
				color: #fff;
				cursor: pointer;
			}
			.tit {
				font-size: 1.4em;
			}
			.tit:after {
				content: "";
				display: block;
				clear: both;
			}
			.max-box {
				max-width: 640px;
				margin: 0 auto;
				padding-bottom: 10px;
				background: #630100;
			}
			.list:after {
				content: "";
				display: block;
				clear: both;
			}
			.list img {
				width: 100%;
				float: left;
				height: 200px;
				border: 7px solid #D35128;
				box-sizing: border-box;
				-moz-box-sizing: border-box;
				-webkit-box-sizing: border-box;
			}
			.list-box:after {
				content: "";
				display: block;
				clear: both;
			}
			.tit-min {
				margin: 1em 0 0 0;
				margin-bottom: 5px;
				font-size: 1.4em;
				color: #D35128;
			}
			#maxnum {
				color: #D35128;
				font-size: 1em;
				font-weight: normal;
			}
			.list p {
				height: 30px;
				line-height: 30px;
				margin-top: 1em;
				float: left;
				width: 100%;
				position: relative;
			}
			.list p input {
				margin-left: 10px;
			}
			.list {
				margin-top: 10px;
				width: 45%;
				float: left;
			}
			.per {
				width: 100%;
				height: 0px;
				float: left;
				overflow: hidden;
			}
			.per .per-left {
				display: block;
				width: 50%;
				float: left;
				position: relative;
			}
			.per-left p {
				position: absolute;
				left: 0;
				top: -10px;
				width: 100%;
				height: 10px;
				border-radius: 5px;
				background: #757070;
				z-index: 1;
			}
			.per span {
				position: absolute;
				left: 0;
				top: 2px;
				width: 0%;
				display: block;
				height: 10px;
				border-radius: 5px;
				background: #459605;
				z-index: 2;
				-webkit-transition: width .5s linear;
			}
			.per b u {
				color: #757070;
				text-decoration: none;
			}
			.per b {
				float: right;
				font-weight: 500;
				color: #757070;
			}
			.per b i {
				font-style: normal;
			}
			.per s {
				display: none;
			}
			.list p input {
				display: none;
			}
			.list p span {
				display: block;
				width: 20px;
				height: 20px;
				background: #fff;
				position: absolute;
				left: 6px;
				top: 4px;
				border-radius: 50%;
			}
			.list p span.inp:after {
				content: '';
				position: absolute;
				left: 3px;
				top: 3px;
				width: 14px;
				height: 14px;
				border-radius: 50%;
				background: url();
				background-size: 100% 100%;
			}
			.list p b {
				font-weight: normal;
				display: block;
				margin-left: 30px;
				height: 30px;
				line-height: 30px;
				float: left;
			}
			.box-img {
				width: 100%;
			}
			#forms {
				margin: 0 20px;
			}
			.tit-box {
				position: relative;
				margin-top: 45px;
				background: #350201;
				padding: 10px 20px;
			}
			.tit-box:before {
				content: "";
				position: absolute;
				left: 0;
				right: 0;
				top: -36px;
				border: 0 dashed transparent;
				width: 100%;
				height: 0;
				font-size: 0;
				border-width: 10px;
				box-sizing: border-box;
				border-bottom: 26px solid #8c2819;
			}
			.tit span {
				display: block;
				float: left;
				border-bottom: 4px solid #C20000;
				font-size: 1.2em;
				padding-left: 28px;
				position: relative;
			}
			.tit span:after {
				content: "";
				width: 25px;
				height: 25px;
				background: url();
				background-size: 100% 100%;
				position: absolute;
				left: 0;
				top: 0px;
			}
			.list-box:after {
				content: "";
				display: block;
				clear: both;
			}
			.list-box .list:nth-of-type(2n) {
				margin-right: 10%;
			}
			@media screen and (max-width: 400px) {
				.list {
					width: 100%;
				}
			}
			div.list-box {
				padding-bottom: 170px;
				background-image: url("");
				background-position: left bottom;
				background-repeat: no-repeat;
				background-size: 100% 290px;
			}
			.bottom-b {
				position: absolute;
				left: 50%;
				bottom: 41px;
				margin-left: -5em;
				width: 10em;
				height: 10em;
				background-image: url("");
				background-size: 100% 100%;
			}
			.bottom-b:hover {
				background-image: url("");
			}
		</style>
	</head>

	<body>

		<div class="max-box-top">
			<div class="max-box">
				<img src="{$microVote.pic}" class="box-img" alt="" />
				<form action="__CONTROLLER__/saveRecord" method="post" id="forms">
					<input type="hidden" name="sid" value="{$sid}">
					<input type="hidden" name="select_items" value="{$microVote.select_items}">
					<div class="tit-box">
						<div class="tit"><span>{$microVote.title}</span>
						</div>
						<div class="tit-min">描述内容:{$microVote.desc}，最多可选择<b id="maxnum">{$microVote.select_items}</b>
						</div>
					</div>
					<input type="hidden" name="micro_vote_id" value="{$microVote.id}">
					<div class="list-box tit-box">
						<div class="tit"><span>为你心中的好教官投票</span>
						</div>
						<foreach name="microVote.itemTitle" item="v">
							<div class="list">
								<img src="{$v.pic}" alt="" />
								<p>
									<span></span>
									<input type="{$microVote.select_options}" name="selected[]" class="set-input" value="{$v.id}"><b>{$v.answer}</b>
								</p>
								<div class="per">
									<div class="per-left"><span class="{$v.id}"></span>
										<p></p>
									</div><b><u>100%</u>(<i>2</i><s></s>)</b>
								</div>
							</div>
						</foreach>
						<div class="bottom-b sub"></div>
					</div>
				</form>
			</div>
		</div>
		<script>
			$(function() {
				$(".list img").click(function() {
					if ($("#maxnum").html() == "1") {
						$(".list input").prop("checked", false);
						$(".list span").removeClass("inp");
					}
					if ($(this).parents(".list").find("input").is(":checked")) {
						$(this).parents(".list").find("input").prop("checked", false);
						$(this).parents(".list").find("span").removeClass("inp");
					} else {
						$(this).parents(".list").find("input").prop("checked", true);
						$(this).parents(".list").find("span").addClass("inp");
					}
				});
				$(".sub").click(function() {
					if ($(".max-box").find(".set-input:checked").size() == "0") {
						GH.showMessage("请至少选择一个哦！");
					} else {
						if ($("#maxnum").html() >= $(".max-box").find(".set-input:checked").size()) {
							var ourl = "__CONTROLLER__/saveRecord";
							var data = $("#forms").serialize();
							$.ajax({
								type: "POST",
								url: ourl,
								data: data,
								success: function(msg) {
									if (msg.error == "0") {
										GH.showMessage(msg.msg);
										for (var i in msg.count) {
											console.log(i);
											console.log($("." + i).parents(".per").find("i").html());
											$("." + i).parents(".per").find("i").html(msg.count[i]);
											$("." + i).parents(".per").find("s").html(msg.total);
										}
										$(".per").each(function(i) {
											$(".per").css({
												"height": "15px"
											});
											var oW = parseInt($(".per").eq(i).find("i").html() / $(".per").eq(i).find("s").html() * 100);
											$(this).find("span").css({
												"width": oW + "%"
											});
											$(this).find("u").html(oW + "%");
										})
									} else {
										GH.showMessage(msg.msg);
									}
								}
							});
						} else {
							GH.showMessage("只能选择" + $("#maxnum").html() + "个哦！");
						}
					}
				})
			})
		</script>
		<!--   <script>
     $(function(){
    	 if(isWeiXin()){}else{
    	        document.write("<style>.inner{margin-top: 20px;}body{line-height:1.6;font-family:'Helvetica Neue',Helvetica,'Microsoft YaHei',Arial,Tahoma,sans-serif;}body,h1,h2,h3,h4{margin:0;}a img{border:0;}body{background-color: #e1e0de;}.page_msg .msg_content h4{font-weight: 400;color: #000000;}.page_msg{text-align:center;}.icon80_smile{background-image: url('');width: 80px;height: 80px;display: inline-block;}</style><div class='page_msg'><div class='inner'><span class='msg_icon_wrp'><i class='icon80_smile'></i></span><div class='msg_content'><h4>请在微信客户端打开链接</h4></div></div></div>");
    	      }
     })
	    function isWeiXin(){
	      var ua = window.navigator.userAgent.toLowerCase();
	      if(ua.match(/MicroMessenger/i) == 'micromessenger'){
	      return true;
	      }else{
	      return false;
	      }
	    }
  </script> -->
	</body>

</html>

<!--{:dump($vars)}-->